<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>更多</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 图标 -->
    <script src="../css/iconfont.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- bootstrap -->
    <script src="../js/jquery-3.2.1.js"></script>
    <!-- jquery.form.js -->
    <script src="../js/jquery.form.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/books.css">

</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container-fluid bgcolor ">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" style="border: none"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://120.78.75.213:8080/books/showUser" style="color: white">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu"></use>
                    </svg>&nbsp; Books_Jt</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <div class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" id="searchString" class="form-control" onkeydown="keyupEnter(event)"
                                    placeholder="Search">
                            </div>
                            <button type="button" onclick="searchAllBooks(1)" class="btn btn-success">Search</button>
                        </div>
                    </li>
                    <li>
                        <a href="./shoppingBooks.html" target="_blank">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>&nbsp; 购物车</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-user"></use>
                            </svg>&nbsp;
                            你好！
                            <span id="userVV" style=" font-size: 20px;color: rgb(255, 136, 0);font-weight: bold;display: none">\/</span>
                            <span id="userID">用户</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="modal" data-target="#mySetting">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-setting-fill"></use>
                                    </svg>&nbsp;设置</a>
                            </li>
                            <li>
                                <a href="../html/collectionbooks.html" target="_blank">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-alert"></use>
                                    </svg> &nbsp;收藏
                                </a>
                            </li>
                            <li>
                                <a href="../html/myshare.html" target="_blank">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-reddit"></use>
                                    </svg> &nbsp;成为会员
                                </a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a href="http://120.78.75.213:8080/books/index">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-logout"></use>
                                    </svg>&nbsp;注销</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container" style="padding-top: 60px;background-color: white;border-radius: 5px;padding-bottom: 20px">
        <ol class="breadcrumb">
            <li>
                <a href="http://120.78.75.213:8080/books/showUser">
                    首页
                </a>
            </li>
            <li class="active">更多书籍</li>
        </ol>

        <div class="container-fluid" id="kindList">
            <el-radio-group v-model="radio" @change="kindChange">
                <el-radio v-for="(items,index) in kinds_radio" :label="index+1" border>{{items}}</el-radio>
            </el-radio-group>
            <hr>
            <div class="morebooksBox">
                <h3>书籍列表:</h3>
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item v-for="(books_items,index) in books_data" :title="(index+1)+'.'+'书名:'+books_items.bookname"
                        :name="index+1">
                        <span style="float:right">
                            <el-row>
                                <el-button type="primary" icon="el-icon-goods" size="mini" @click="btnShopping(books_items.kindid,books_items.id) "
                                    circle></el-button>
                                <el-button type="primary" icon="el-icon-star-off" size="mini" @click="btnCollcetion(books_items.kindid,books_items.id)"
                                    circle></el-button>
                                <el-button type="success" icon="el-icon-download" size="mini" @click="downBook(books_items.kindid,books_items.id)"
                                    circle></el-button>
                            </el-row>
                        </span>
                        <a @click="jumpBook(books_items.kindid,books_items.id)">
                            <div><span> 发布人: {{books_items.manage}}</span> <span style="padding-left: 20px">发布时间:
                                    {{books_items.altertime}}</span> </div>
                            <div class="bookslist">
                                <img :src="books_items.bookimg" width="64" height="64" alt="图片">
                                <p>书籍简介: &nbsp;&nbsp;{{books_items.bookintro}} </p>
                            </div>

                        </a>
                    </el-collapse-item>

                </el-collapse>

            </div>
        </div>


    </div>
    <!-- Modal -->
    <div class="modal fade" id="mySetting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">个人信息修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="http://120.78.75.213:8080/books/uphtmlUsers" method="post">
                        <div class="form-group">
                            <label for="usernameInput" class="col-sm-2 control-label">Username:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="usernameInput" placeholder="用户名" name="usernameInput1"
                                    required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="passwordInput" class="col-sm-2 control-label">Password:</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="passwordInput" name="passwordInput1"
                                    placeholder="密码" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textareaInput" class="col-sm-2 control-label">备注:</label>
                            <div class=" col-sm-10">
                                <textarea class="form-control" name="remarkInput1"></textarea>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/getfunction.js"></script>
    <script src="../js/kindbooks.js"></script>
    <script>
        $('#usernameInput').val(sessionStorage.getItem('username'));
        $(document).ready(function () {
            $.ajax({
                url: "http://120.78.75.213:8080/books/memberIf",
                method: "POST",
                async: false,
                success: function (e) {
                    // console.log(e.userPor[0].ifMember)
                    if (e.userPor[0].ifMember == 1) {

                        document.getElementById("userVV").style.display = "inline"
                    }
                },
                error: function (err) {
                    alert(err + "错误");
                }
            });
        })
    </script>
</body>

</html>